<template>
  <div class="text-left pb-12 font-bold px-15 pt-12">热门国家</div>
  <div class="flex  flex-wrap px-20">
    <div v-for="(item,index) in hotCountryList" :key="index" class="rounded-12 border border-#eee border-solid country px-6 pt-6 pb-8  text-center bg-[#f6f7f9] mb-10" @click="toVisaList(item.country_name,index)">
      <p>{{ item.country_name }}</p>
    </div>
  </div>
</template>
<script setup>
import { defineProps } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { defineEmits, defineExpose } from 'vue'
import { useUserStore } from '@/store/modules/user/index.js'
const emit = defineEmits(['goSelectVisa', 'update:selectedProvince'])

const router = useRouter()
const route = useRoute()
defineProps({
  hotCountryList: {
    type: Array
  },
  selectedProvince: {
    type: [Number, String],
    default: '北京'
  }
})

const toVisaList = async (name) => {
  router.push({ path: '/visaList', query: { country_name: name, addr_json_url: route.query.addr_json_url } })
}
</script>

<style lang="scss" scoped>
.country {
  flex: 0 0 32%;
  margin-right: 2%;
  border: 2px solid transparent;
}
.country:nth-child(3n) {
  margin-right: 0;
}
.country.active {
  background-color: #fff3bf;
  border: 2px solid #f6d742;
}
</style>